<template>
  <div class="homePageTop">
    <!-- 搜索导航栏 -->
    <div class="search">
      <van-nav-bar right-text="登录">
        <template #left>
          <router-link to="/home" class="logo"></router-link>
        </template>
        <template #title>
          <van-search placeholder="搜索商品, 共119551款好物" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 分类栏 -->
    <div class="sort">
      <van-tabs sticky>
        <van-tab v-for="(v, index) in arr" :key="index" :title="v">
          <template #default> </template>
        </van-tab>
      </van-tabs>

      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(v, index) in lbarr" :key="index">
          <img :src="v" />
        </van-swipe-item>
      </van-swipe>

      <van-grid :column-num="5">
        <van-grid-item
          v-for="(v, index) in listarr"
          :key="index"
          :icon="v.img"
          :text="v.str"
        />
      </van-grid>
    </div>
    <AllCom />
  </div>
</template>
<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      arr: [],
      lbarr: [],
      listarr: [],
    };
  },
  mounted() {
    service({
      url: "http://localhost:3000/shouy",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.arr.push(element.str);
      });
    });
    service({
      url: "http://localhost:3000/shouyelb",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.lbarr.push(element.img);
        // console.log(element.img);
      });
    });
    service({
      url: "http://localhost:3000/shouyelist",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.listarr.push(element);
        // console.log(element);
      });
    });
  },
};
</script>

<style scoped>
.van-swipe img {
  width: 100%;
}
</style>